<template>
  <el-tabs v-bind="$attrs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      :disabled="item.disabled"
      v-for="item in newTabList"
      :key="item.value"
      :label="getLabel(item)"
      :name="item.value"
    ></el-tab-pane>
    <slot v-for="(item, key) in $slots" :name="key"></slot>
  </el-tabs>
</template>

<script setup>
import { toRaw, computed } from "vue";
import { isTrue } from "../../lib";
const emits = defineEmits(["update:modelValue", "tabClick"]);
const props = defineProps({
  // 当前选中的项标识
  modelValue: {
    type: [Number, String],
    default: "",
  },
  // tab列表数据
  tabList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const newTabList = computed(() => {
  return props.tabList.filter((item) => isTrue(item.display));
});

const activeName = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});

const handleClick = (item) => {
  emits("tabClick", toRaw(newTabList.value[item.index]));
};

const getLabel = (item) => {
  return "total" in item ? `${item.label} (${item.total})` : item.label;
};
</script>
